<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻资讯</title>
    <!-- 样式文件引入 -->
    <link rel="stylesheet" href="styles/index.css">
    <link rel="stylesheet" href="styles/tab.css">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/weather.css">
</head>

<body>
    <!-- 上部分-页面标题 -->
    <div class="top">
        <div class="toplog">新闻资讯</div>
        <div class="newsselect">
            <input type="text"id="selectinput"placeholder="请输入搜索内容">
            <img src="image/搜索.png" alt=""class="selectlog">
        </div>
    </div>
    <!-- 中间部分-Tab切换栏目 -->
    <div class="newstab">
        <ul>
            <li class="current">头条</li>
            <li>电竞</li>
            <li>NBA</li>
            <li>娱乐</li>
        </ul>
    </div>
    <!-- 内容部分 -->
    <div class="newscontainer">
        <!-- 新闻内容  -->
        <div class="card">
            <!-- 左边图片 -->
            <div class="left"><img src="des.png" alt=""></div>
            <!-- 右边文本 -->
            <div class="right">
                <!-- 上面标题 -->
                <h5>新冠药物概念震荡走高，拓新药业涨超8%，华润双鹤、精华制药涨超5%，赛伦生物、诚达药业等跟涨 </h5>
                <!-- 下面来源和时间 -->
                <div class="sourse-content">
                    <span>来源：今日头条</span>
                    <span>2022-05-25 14：02</span>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="left"><img src="des.png" alt=""></div>
            <div class="right">
                <h5>新冠药物概念震荡走高，拓新药业涨超8%，华润双鹤、精华制药涨超5%，赛伦生物、诚达药业等跟涨 </h5>
                <div class="sourse-content">
                    <span>来源：今日头条</span>
                    <span>2022-05-25 14：02</span>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="left"><img src="des.png" alt=""></div>
            <div class="right">
                <h5>新冠药物概念震荡走高，拓新药业涨超8%，华润双鹤、精华制药涨超5%，赛伦生物、诚达药业等跟涨 </h5>
                <div class="sourse-content">
                    <span>来源：今日头条</span>
                    <span>2022-05-25 14：02</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 浮窗 -->
    <div class="weatherlog"><img src="image/多云.png" alt=""></div>

    <!-- 搜索板 -->
    <div class="select">
        <div class="selectinput">
            <input type="text" class="swi" placeholder="请输入城市名称"><button class="swb">查询</button><span class="noadd-close">X</span>
            <div class="add"><span>+</span></div>
        </div>
        <div class="container">
        </div>
    </div>

    <!-- 天气tab -->
    <div class="weather">
        <div class="tabsbox" id="tab">
            <!-- 标签 -->
            <nav class="firstnav">
                <ul>
                    <li class="liactive">
                        <span>测试1</span><span class="iconfont icon-close"></span>
                    </li>
                </ul>
                <div class="tabadd"><span>+</span></div>
            </nav>
            <!-- 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
            </div>
        </div>
    </div>

    <!-- JQuery库文件引入 -->
    <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- JS文件引入 -->
    <script src="js/index.js"></script>
    <!-- 面向对象tab的引入 -->
    <script src="js/tab-12.3.5.js"></script>
    <!-- 天气js -->
    <script src="js/weather.js"></script>
</body>
</html>